<template>
<div style="margin-top:10px;">
    <!-- 词条头部 -->
    <div class="header">
        <searchEngine></searchEngine>
    </div>

    <div class="aticleShow" :style="setHeight()">
        <div class="slides">
            <!-- 轮播部分 -->
            <slider :bodyWidth="bodyWidth" :sliderBanner="sliderBanner"></slider>
        </div>
        <div class="hot_search_entry">
            <searchEntry :hotEntry="hotEntry"></searchEntry>
        </div>
    </div>
    <div class="bg" :style="setHeight()">
      <div class="hotAticle_container">
           <table></table>
           <h2>冷知识</h2>
           <div class="aticle_card_container">
              <div class="aticle_card" v-for="(item,i) of transformCardDate" :key="i" >
                 <transformCard :card="item">
                 </transformCard>
              </div>
           </div>
      </div>
    </div>

</div>
</template>
<style scoped>
* {
  margin: 0
}
/******************* 轮播区域样式 ********************/
.aticleShow{
  display: flex;
  justify-content: center;
  /* height: 500px; */
  margin-top: 10px;
  background: #d8e5f2  center center no-repeat
}
.slides{
  height: 100%;
  width: 50%;
  /* border: 1px solid red; */
}
.hot_search_entry{
  height: 100%;
  width: 20%;
  /* border: 1px solid yellow; */
  
}
/**************************End********************** */

/******************* 热门文章区域样式 ********************/
.bg {
  background: #f5f5f5;
}
.hotAticle_container {
  width: 70%;
  height: 100%;
  /* border: 1px solid red; */
  margin: 0 auto;
}
.hotAticle_container>h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 20px;
  font-size: 18px;
  font-weight: 400;
}
.aticle_card_container {
  height: 100%;
  /* border: 1px solid yellow; */
  display: flex;
  justify-content: space-between;
}
.aticle_card {
  width: 24%;
  height: 72%;
}

/**************************End********************** */  
</style>
<script>
import searchEngine from '@/components/fyx/search_engine.vue'
import slider from '@/components/fyx/slider.vue'
import searchEntry from '@/components/fyx/search_entry.vue'
import transformCard from '@/components/fyx/3dCard.vue'

export default {
    components: {
      searchEngine,slider,searchEntry,transformCard
    },
    data() {
      return {
        bodyWidth: document.body.clientWidth,
        front: true,
        //冷知识的数据
        transformCardDate:[
          {
            aid:1,
            url:'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2893596917,248005072&fm=26&gp=0.jpg',
            title: '量子时间是主观的？',  
			      introduce: '飞沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为细小。沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为,飞沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为细小。沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为'
          },
          {
            aid:1,
            url:'https://www.kepuchina.cn/wiki/yzts/02/202003/W020200310477346500303.jpg',
            title: '量子时间是主观的？',  
			      introduce: '飞沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为细小。沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为'
          },
          {
            aid:1,
            url:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1021848753,1733838693&fm=26&gp=0.jpg',
            title: '量子时间是主观的？',  
			      introduce: '飞沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为细小。沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为'
          },
          {
            aid:1,
            url:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3275582907,928677784&fm=26&gp=0.jpg',
            title: '量子时间是主观的？',  
			      introduce: '飞沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为细小。沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为'
          }
        ],
        //轮播图的数据
        sliderBanner: [
          [
              {
			          aid:1,              
			          url: 'http://bwg.cdutetc.cn/site/cms_24/upload/image/20190709/1562661072508089492.jpg',   
			          title: '量子时间是主观的？',  
			          introduce: '飞沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为细小。沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为沫的主要成分是水和病毒，如果环境非常干燥，那么，随着时间的推移，水分逐渐蒸发，小液滴会崩解，变得更为'
              },
              {
			          aid:1,              
			          url: 'http://bwg.cdutetc.cn/site/cms_24/upload/image/20190709/1562661336759041681.jpg',   
			          title: '量子时间是主观的？',  
			          introduce: '核聚变（nuclear fusion），又称核融合、融合反应、聚变反应或热核反应。核是指由质量小的原子，主要是指氘，在一定条件下（如超高温和高压）'
              },
              {
			          aid:1,              
			          url: 'http://bwg.cdutetc.cn/site/cms_24/upload/image/20190610/1560153217484084822.jpg',   
			          title: '核爆炸',  
			          introduce: '核聚变燃料可来源于海水和一些轻核，所以核聚变燃料是无穷无尽的。 人类已经可以实现不受控制的核聚变，如氢弹的爆炸'
              },
              
          ],
          [
              {
			          aid:1,              
			          url: 'http://bwg.cdutetc.cn/site/cms_24/upload/image/20190610/1560158949825085496.jpg',   
			          title: '量子时间是主观的？',  
			          introduce: '核聚变，即轻原子核（例如氘和氚）结合成较重原子核（例如氦）时放出巨大能量。因为化学是在分子、原子层次上研究物质性质'
              },
              {
			          aid:1,              
			          url: 'http://bwg.cdutetc.cn/site/cms_24/upload/image/20190610/1560158247010086614.jpg',   
			          title: '电解水？',  
			          introduce: '电解水H2O生成H2，通过核裂变产生的高能辐射蒸汽压缩氢气（H2），这时的氢气成为离子状态，辐射蒸汽压缩H，两个H核核聚变生成一个He核'
              },
              {
			          aid:1,              
			          url: 'http://bwg.cdutetc.cn/site/cms_24/upload/image/20190610/1560153217484084822.jpg',   
			          title: '反应条件',  
			          introduce: '（如超高温和高压），发生原子核互相聚合作用，生成新的质量更重的原子核，并伴随着巨大的能量释放的一种核反应形式'
              },
          ],
          [
            {
			          aid:1,              
			          url: 'http://bwg.cdutetc.cn/site/cms_24/upload/image/20190610/1560158499872087898.jpg',   
			          title: '实现方式？',  
			          introduce: '激光约束（惯性约束）核聚变（如我国的神光计划，美国的国家点火计划都是这种形式）磁约束核聚变'
              },
              {
			          aid:1,              
			          url: 'http://bwg.cdutetc.cn/site/cms_24/upload/image/20190610/1560158159239045336.jpg',   
			          title: '发生条件？',  
			          introduce: '产生可控核聚变需要的条件非常苛刻。我们的太阳就是靠核聚变反应来给太EAST全超导非圆截面核聚变实验装置EAST全超导非圆截面核聚变实验装置阳系带来光和热，其中心温度达到1500万摄氏度'
              },
              {
			          aid:1,              
			          url: 'http://bwg.cdutetc.cn/site/cms_24/upload/image/20190614/1560503705748007202.jpg',   
                title: '核聚变的方法有哪些',  
			          introduce: '实现核聚变已有不少方法。最早的著名方法是"托卡马克"型磁场约束法。它是利用通过强大电流所产生的强大磁场，把等离子体约束在很小范围内以实现上述三个条件'
              },
          ]
        ],
        // sliderBanner:[[{}],[],[]],
        //热搜词条的数据
        hotEntry:[
          {
            aid:1,
            url:'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2893596917,248005072&fm=26&gp=0.jpg',
            title: '2020年新形冠状病毒疫情',  
			      introduce: '2019年12月以来，湖北省武汉市持续开展流感及相关疾病监测，发现多起病毒性肺炎病例。'
          },
          {
            aid:2,
            url:'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2893596917,248005072&fm=26&gp=0.jpg',
            title: '雷神山医院',  
			      introduce: '湖北省武汉市持续开展流感及相关疾病监测'
          },
          {
            aid:3,
            url:'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2893596917,248005072&fm=26&gp=0.jpg',
            title: '火神山医院',  
			      introduce: '2019年12月以来，湖北省武汉市持续开展流感及相关疾病监测，发现多起病毒性肺炎病例。'
          }
        ]
      }
    },
    methods: {
      setHeight(part = 3.84) {
         //屏幕的宽和容器的高比列为3.84
        return `height:${this.bodyWidth/part}px;`
      },
      goto_article( item ) {
           this.$router.push(`/scienceAticle?article_id=${item}`)
      },
      transformFront(i) {
        console.log('aa');
        this.transformCard[i].transform = 'wrong'
      },
      transformWrong(i) {
        this.transformCard[i].transform = 'front'
      },
      sliderBannerData(res) {
        res.forEach((item, i) => {
          let obj = {aid: item.aid, url: item.imgUrls[0], title: item.title, introduce: item.introduce}
          if(i<=2) {
            this.$set(this.sliderBanner[0],i,obj)
          }
          if(i<=5) {
            this.$set(this.sliderBanner[1],i - 3,obj)
          }
          if(i<=8) {
            this.$set(this.sliderBanner[2],i - 6,obj)
          }
        })
        
      }
    },
    created() {
      this.$api.queryArticleAll().then(res => {
        console.log(1,res.data)
        this.sliderBannerData(res.data.data.slice(0,9))
      })
    },
    mounted() {
      window.addEventListener('resize', ()=>{
        this.bodyWidth = document.body.clientWidth;
      })
    },
    beforeDestroy() {
      window.removeEventListener('resize', ()=>{
        this.bodyWidth = document.body.clientWidth;
      })
    }
}
</script>